<template>
  <div v-if="showDebugPanel" class="debug-panel">
    <el-card class="debug-card">
      <template #header>
        <div class="debug-header">
          <span>🐛 状态调试面板</span>
          <el-button type="text" size="small" @click="togglePanel">
            {{ showDetails ? '收起' : '展开' }}
          </el-button>
        </div>
      </template>

      <div v-if="showDetails" class="debug-content">
        <el-descriptions :column="2" size="small" border>
          <el-descriptions-item label="当前文件路径">
            {{ stateInfo.currentFilePath || '未设置' }}
          </el-descriptions-item>
          <el-descriptions-item label="数据版本">
            {{ stateInfo.dataVersion }}
          </el-descriptions-item>
          <el-descriptions-item label="加载状态">
            <el-tag :type="stateInfo.isLoading ? 'warning' : 'success'" size="small">
              {{ stateInfo.isLoading ? '加载中' : '空闲' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="短文件名">
            {{ stateInfo.shortFileName }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="debug-actions">
          <el-button size="small" @click="logState">📝 打印状态</el-button>
          <el-button size="small" @click="incrementVersion">🔄 增加版本</el-button>
          <el-button size="small" @click="resetState">🔄 重置状态</el-button>
        </div>

        <div class="debug-cache-info">
          <h5>缓存信息</h5>
          <el-descriptions :column="2" size="small">
            <el-descriptions-item label="缓存数量">
              {{ cacheStats.cacheSize }}
            </el-descriptions-item>
            <el-descriptions-item label="正在加载">
              {{ cacheStats.activeLoading }}
            </el-descriptions-item>
          </el-descriptions>

          <div v-if="cacheStats.cacheKeys.length > 0" class="cache-keys">
            <h6>缓存路径:</h6>
            <el-tag
              v-for="key in cacheStats.cacheKeys"
              :key="key"
              size="small"
              class="cache-key-tag"
            >
              {{ getShortPath(key) }}
            </el-tag>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, type Ref } from 'vue';
import { useAnalysisStore } from '../stores/analysis-store';
import { AnalysisDataService } from '../services/analysis-data';

// 响应式数据
const showDebugPanel: Ref<boolean> = ref(false);
const showDetails: Ref<boolean> = ref(false);

// 使用状态管理
const { getStateInfo, incrementDataVersion, reset } = useAnalysisStore();
const analysisService = AnalysisDataService.getInstance();

// 计算属性
const stateInfo = computed(() => getStateInfo());
const cacheStats = computed(() => analysisService.getCacheStats());

/**
 * 切换面板显示
 */
const togglePanel = (): void => {
  showDetails.value = !showDetails.value;
};

/**
 * 打印状态信息
 */
const logState = (): void => {
  console.group('🐛 分析工具状态调试');
  console.log('状态信息:', stateInfo.value);
  console.log('缓存统计:', cacheStats.value);
  console.groupEnd();
};

/**
 * 增加数据版本
 */
const incrementVersion = (): void => {
  incrementDataVersion();
  console.log('🔄 已手动增加数据版本');
};

/**
 * 重置状态
 */
const resetState = (): void => {
  reset();
  console.log('🔄 已重置全局状态');
};

/**
 * 获取短路径
 */
const getShortPath = (fullPath: string): string => {
  const parts = fullPath.split('/');
  return parts.length > 2 ? `.../${parts.slice(-2).join('/')}` : fullPath;
};

// 组件挂载时检查是否为开发环境
onMounted(() => {
  showDebugPanel.value = import.meta.env.DEV;

  // 在开发环境下监听键盘事件
  if (import.meta.env.DEV) {
    const handleKeyPress = (event: KeyboardEvent) => {
      // Ctrl + Shift + D 切换调试面板
      if (event.ctrlKey && event.shiftKey && event.key === 'D') {
        showDetails.value = !showDetails.value;
        event.preventDefault();
      }
    };

    window.addEventListener('keydown', handleKeyPress);

    // 清理事件监听器
    const cleanup = () => {
      window.removeEventListener('keydown', handleKeyPress);
    };

    return cleanup;
  }
});
</script>

<style scoped>
.debug-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 400px;
  min-width: 300px;
}

.debug-card {
  border: 2px solid #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #409eff;
}

.debug-content {
  padding: 10px 0;
}

.debug-actions {
  margin: 15px 0;
  text-align: center;
}

.debug-actions .el-button {
  margin: 0 4px;
}

.debug-cache-info {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.debug-cache-info h5 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #606266;
}

.debug-cache-info h6 {
  margin: 10px 0 5px 0;
  font-size: 12px;
  font-weight: 600;
  color: #909399;
}

.cache-keys {
  margin-top: 10px;
}

.cache-key-tag {
  margin: 2px 4px 2px 0;
  font-family: monospace;
  font-size: 11px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .debug-panel {
    position: relative;
    top: auto;
    right: auto;
    margin: 20px 0;
    max-width: 100%;
  }
}
</style>
